<template>
<div class="card">
   <!-- 图片区 -->
     <el-row>
          <el-col :span="24">
            <el-image
          style="width: 100%"
          :src="require('@/assets/top.jpg')"
          :fit="contain"></el-image>
          </el-col>
      </el-row>
        <!-- 标题区 -->
        <el-row style="padding:10px;">
          <el-col :span="24" style="font-size: 24px;font-weight: 700;"></el-col>
        </el-row>
        <!-- 投票区 -->
        <el-row  :gutter="22" type="flex" justify="space-around" >
           <!-- 1 -->
           <el-col :span="10" >
            <el-card :body-style="{ padding: '10px' }">
              <a :href="url6" target="_blank"> <el-image
                  style="width: 100%; "
                  :src="require('@/assets/p6.jpg')"
                  :fit="contain"></el-image></a>
              <div class="bbgg">
                <div class="title1">  {{title6}}</div>
                <div class="t1"><a :href="url6" target="_blank">{{t6}}</a></div>
                <div class="time"  >
                  <div >票数：{{p6}}</div>
                  <div @click="vote(id6)" class="el-button--text">投一票</div>
                </div>
              </div>
            </el-card>
          </el-col>
      <!-- 2 -->
      <el-col :span="10" >
        <el-card :body-style="{ padding: '10px' }">
          <a :href="url7" target="_blank"> <el-image
              style="width: 100%; "
              :src="require('@/assets/p7.jpg')"
              :fit="contain"></el-image></a>
          <div class="bbgg">
            <div class="title1">  {{title7}}</div>
            <div class="t1"><a :href="url7" target="_blank">{{t7}}</a></div>
            <div class="time"  >
              <div >票数：{{p7}}</div>
              <div @click="vote(id7)" class="el-button--text">投一票</div>
            </div>
          </div>
        </el-card>
      </el-col>

          </el-row>
           <!-- 投票区 -->
        <el-row  :gutter="22" type="flex" justify="space-around" style="padding:10px;">
           <!-- 1 -->
           <el-col :span="10" >
            <el-card :body-style="{ padding: '10px' }">
              <a :href="url3" target="_blank"> <el-image
                  style="width: 100%; "
                  :src="require('@/assets/p3.jpg')"
                  :fit="contain"></el-image></a>
              <div class="bbgg">
                <div class="title1">  {{title3}}</div>
                <div class="t1"><a :href="url3" target="_blank">{{t3}}</a></div>
                <div class="time"  >
                  <div >票数：{{p3}}</div>
                  <div @click="vote(id3)" class="el-button--text">投一票</div>
                </div>
              </div>
            </el-card>
          </el-col>
      <!-- 2 -->
      <el-col :span="10" >
        <el-card :body-style="{ padding: '10px' }">
          <a :href="url2" target="_blank"><el-image
              style="width: 100%; "
              :src="require('@/assets/p2.jpg')"
              :fit="contain"></el-image></a>
          <div class="bbgg">
            <div class="title1">  {{title2}}</div>
            <div class="t1"><a :href="url2" target="_blank">{{t2}}</a></div>
            <div class="time"  >
              <div >票数：{{p2}}</div>
              <div @click="vote(id2)" class="el-button--text">投一票</div>
            </div>
          </div>
        </el-card>
      </el-col>

          </el-row>
 <!-- 投票区 -->
        <el-row  :gutter="22" type="flex" justify="space-around" style="padding:10px;">
           <!-- 1 -->
           <el-col :span="10" >
            <el-card :body-style="{ padding: '10px' }">
              <a :href="url5" target="_blank"> <el-image
                  style="width: 100%; "
                  :src="require('@/assets/p5.jpg')"
                  :fit="contain"></el-image></a>
              <div class="bbgg">
                <div class="title1">  {{title5}}</div>
                <div class="t1"><a :href="url5" target="_blank">{{t5}}</a></div>
                <div class="time"  >
                  <div >票数：{{p5}}</div>
                  <div @click="vote(id5)" class="el-button--text">投一票</div>
                </div>
              </div>
            </el-card>
          </el-col>
      <!-- 2 -->
      <el-col :span="10" >
        <el-card :body-style="{ padding: '10px' }">
          <a :href="url1" target="_blank"> <el-image
              style="width: 100%; "
              :src="require('@/assets/p1.jpg')"
              :fit="contain"></el-image></a>
          <div class="bbgg">
            <div class="title1">  {{title1}}</div>
            <div class="t1"><a :href="url1" target="_blank">{{t1}}</a></div>
            <div class="time"  >
              <div >票数：{{p1}}</div>
              <div @click="vote(id1)" class="el-button--text">投一票</div>
            </div>
          </div>
        </el-card>
      </el-col>

          </el-row>
           <!-- 投票区 -->
        <el-row  :gutter="22" type="flex" justify="space-around" style="padding:10px;">
           <!-- 1 -->

          <el-col :span="10" >
            <el-card :body-style="{ padding: '10px' }">
              <a :href="url4" target="_blank"> <el-image
                  style="width: 100%; "
                  :src="require('@/assets/p4.jpg')"
                  :fit="contain"></el-image></a>
              <div class="bbgg">
                <div class="title1">  {{title4}}</div>
                <div class="t1"><a :href="url4" target="_blank">{{t4}}</a></div>
                <div class="time"  >
                  <div >票数：{{p4}}</div>
                  <div @click="vote(id4)" class="el-button--text">投一票</div>
                </div>
              </div>
            </el-card>
          </el-col>
          </el-row>
           <!-- 标题区 -->
        <el-row style="padding:10px;">
          <el-col :span="24" style="font-size: 16px;">版权所有：芒果广播网</el-col>
        </el-row>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      bg: 'http://buck-cct.oss-cn-shenzhen.aliyuncs.com/vote/bg.png',
      url: 'http://buck-cct.oss-cn-shenzhen.aliyuncs.com/vote/top.jpg',
      // imgurl1: require('~@/assets/bg.png'),
      imgurl2: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      imgurl3: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      imgurl4: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      imgurl5: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      imgurl6: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      imgurl7: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      imgurl8: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      title1: '澳门科技大学',
      t1: '程天一、邓颖彤、陈静怡、陈珮莹、曾楷',
      url1: 'http://news.hnradio.com/f/2020/20206/2020629172020455.html',
      title2: '澳门科技大学',
      t2: '佟欣儀',
      url2: 'http://news.hnradio.com/f/2020/20206/2020629172754745.html',
      title3: '湖南中医药大学',
      t3: ' 李一帆、周滔',
      url3: 'http://news.hnradio.com/f/2020/20206/2020629163054619.html',
      title4: '湖南中医药大学 ',
      t4: '叶嘉豪、刁承林、亓伟钰、刘祎、毛欣',
      url4: 'http://news.hnradio.com/f/2020/20206/2020629163840404.html',
      title5: '湖南中医药大学',
      t5: '牛林强、曾小珂、江雨洁、李昇聪、肖刘成',
      url5: 'http://news.hnradio.com/f/2020/20206/2020629165557110.html',
      title6: '香港大学',
      t6: '方东亮',
      url6: 'http://news.hnradio.com/f/2020/20206/2020629171634325.html',
      title7: '香港大学',
      t7: '杜巧辉',
      url7: 'http://news.hnradio.com/f/2020/20206/20206291772415.html',
      p1: 1,
      p2: 1,
      p3: 1,
      p4: 1,
      p5: 1,
      p6: 1,
      p7: 1,
      id1: 1,
      id2: 2,
      id3: 3,
      id4: 4,
      id5: 5,
      id6: 6,
      id7: 7,
      pp: 0

    }
  },
  created () {
    // this.arr.push({
    //  date: date2,
    //  className: 'mark1'
    // })
    this.getpplist()
  },
  methods: {
    async  getpplist () {
      // 获取票数列表
      const { data: res } = await this.$get('vote/getpp')
      console.log('获取pp列表')
      console.log(res)

      this.p1 = res.p1
      this.p2 = res.p2
      this.p3 = res.p3
      this.p4 = res.p4
      this.p5 = res.p5
      this.p6 = res.p6
      this.p7 = res.p7
    },
    async  vote (id) {
      // console.log(id)
      let pp = this.pp
      if (pp > 4) {
        return this.$message.error('您本次已经投过5票了，欢迎下次再来！')
      }
      const { data: res } = await this.$post('vote/add', { id: id })

      // console.log(res.code)
      if (res.code !== 200) {
        return this.$message.error('投票失败,' + res.message)
      }
      this.$message({
        message: '恭喜你，投票成功！',
        type: 'success'
      })
      pp = pp + 1

      this.pp = pp
      // window.sessionStorage.setItem('pp')=pp
      this.getpplist()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
  text-decoration: none;
}
.card {
    background: url('~@/assets/bg.png') center center repeat;
  }
 .time{
  display: flex;
        flex-wrap:wrap;
        justify-content:space-around;
 }
 .title1{
  font-size: 20px;
  font-weight: 700;
  padding-top: 10px;
 }
 .t1{

  padding: 10px;
 }
</style>
